<template>
  <div>
    <el-row class="main" type="flex" justify="center">
      <el-col :span="16">
        <div id="artcle-info">
          <h2 class="text-center">
            <strong>{{ info.title }}</strong>
          </h2>
          <!-- 描述：文章信息 -->
          <div class="text-center timeAndView">
            <span class="article-time">
              <i class="el-icon-time"></i>
              发表于：<span>{{ info.createTime }}</span>
            </span>
            &nbsp;|&nbsp;
            <span class="article-views">
              <i class="el-icon-view"></i>
              阅读量：<span>1</span>万
            </span>
          </div>
          <p class="abstract">
            前言：swagger2功能非常强大，用自己的一句话概括：它是一个构建强大的RESTful
            API文档以及调试的框架。
          </p>
        </div>
        <hr />
        <div id="artcle-content" class="ql-container ql-snow">
          <div class="ql-editor">
            <div class="details_box hljs" v-html="info.content"></div>
          </div>
        </div>
        <div id="statement">
          <div class="item">{{ $t("article.author") }}：it疯子也</div>
          <div class="item">
            {{ $t("article.originalLink") }}：
            <a href="https://www.fengziy.cn/">https://www.fengziy.cn/</a>
          </div>
          <div class="item">
            {{
              $t("article.copyright")
            }}：本博客所有文章除特别声明外,转载请注明出处!
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "../api/article";
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import "highlight.js/styles/darcula.css";
import hljs from "highlight.js";
export default {
  name: "detail",
  data() {
    return {
      info: {},
    };
  },
  components: {
    quillEditor,
  },
  created() {
    // 配置代码高亮
    hljs.configure({
      languages: ["javascript", "php", "java", "python"],
    });
	// hljs.highlightAll();
    request.getArticleDetail(this.$route.params.id).then((res) => {
      if (res.data.code != 200) {
        this.$message({
          message: "加载详情页数据失败",
          type: "error",
        });
        return false;
      }
      this.info = res.data.data;
    });
  },
};
</script>

<style scoped>
#artcle-info {
  padding: 20px;
  background-image: url(../assets/images/vue.jpg);
  margin-bottom: 40px;
}

#artcle-info .abstract {
  color: #ffffff;
  border-left: 3px solid #f56c6c;
  padding: 10px;
  background-color: rgba(126, 129, 135, 0.3);
}

#artcle-info .timeAndView {
  padding: 20px;
  line-height: 30px;
  font-size: 16px;
  color: #ffffff;
}

pre.has {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.8);
}

img.has {
  width: 100%;
}

#statement {
  border-left: 3px solid #f56c6c;
  padding: 20px;
  margin-top: 20px;
  background-color: #ebeef5;
}

.ql-container {
  height: auto;
}

pre,
code {
  font-family: Consolas;
}

.hljs {
  background: none;
  color: #000000;
}
</style>